<template>
  <div class="main_box" style="padding-right:10px">
      <div class="add_wrap">
          <div class="tit">
            <h2>新 增 税 务 发 票</h2>
            <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
          </div>
          <el-form :model="dataForm" ref="dataForm" label-width="180px" :rules="roleRules">
              <el-row>
                  <el-form-item label="公司名称" prop="company">
                    <el-input v-model.trim="dataForm.company" placeholder="请输入公司名称"></el-input>
                  </el-form-item>
                  <el-form-item label="税号" prop="billNo">
                    <el-input v-model.trim="dataForm.billNo"  placeholder="请输入开票税号"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="phone">
                    <el-input type="number" v-model.trim="dataForm.phone" maxlength="11" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                  <el-form-item label="开票人" prop="fullName">
                    <el-input v-model.trim="dataForm.fullName"  placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="开票金额" prop="amount">
                    <el-input type="number" v-model.trim="dataForm.amount" placeholder="请输入开票金额">
                        <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="所在地区" prop="areaIds">
                    <Region :areaValues="dataForm.areaIds" @regionChange="handleItemChange"></Region>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark" style="width:100%;">
                    <el-input type="textarea" v-model.trim="dataForm.remark" style="width:100%;"></el-input>
                  </el-form-item>
              </el-row>
              <el-row>
                    <el-form-item>
                    <el-button plain type="primary" @click="sureClick">保 存</el-button>
                    <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
              </el-row>
          </el-form>
      </div>
  </div>
</template>

<script>
import Region from "@/components/Region";
import FinanceApi from '@/api/finance/finance';

export default {
    name:'BoxAdd',
    data(){
        return{
            billId: '',
            dataForm: {
                company: '',
                billNo: '',
                fullName: '',
                phone: '',
                amount: '',
                remark: '',
                areaIds:[],

                // 省市区
                provinceId:'',
                cityId:'',
                areaId:'',
                provinceName:'',
                cityName:'',
                areaName:'',
            },
            roleRules:{
                company: [
                    { required: true, message: "请输入公司名称", trigger: "blur" }
                ],
                billNo: [
                    { required: true, message: "请输入税号", trigger: "blur" }
                ],
                fullName: [
                    { required: true, message: "请输入开票人姓名", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "请输入联系电话", trigger: "blur" }
                ],
                amount: [
                    { required: true, message: "请输入开票金额", trigger: "blur" }
                ],
                areaIds:[
                    {  required: true, message: "请选择所在区", trigger: "change" }
                ],
            }
        }
    },
    mounted(){
        this.init()
    },
    components: {
        Region
    },
    methods: {
        init(){
            if (this.$route.query.id) {
                this.dataForm.billId = this.$route.query.id;
                this.getData(this.$route.query.id);
            }
        },
        getData(val){
             FinanceApi.getInvoice({billId:val})
                .then(res => {
                    this.$Utils.bindingBean(this.dataForm, res.data);
                    this.dataForm.areaIds = [this.dataForm.provinceId,this.dataForm.cityId,this.dataForm.areaId];
                    console.log(this.dataForm)
                })
        },

        // 地区选择器
        handleItemChange(val){
            this.dataForm.provinceId = val.provinceId;
            this.dataForm.provinceName = val.provinceName;
            this.dataForm.cityId = val.cityId;
            this.dataForm.cityName = val.cityName;
            this.dataForm.areaId = val.areaId;
            this.dataForm.areaName = val.areaName;
            this.dataForm.areaIds = [val.provinceId,val.cityId,val.areaId];
        },

        // 确定
        sureClick(){
            let that = this
            let cond = {
                company: that.dataForm.company,
                billNo: that.dataForm.billNo,
                fullName: that.dataForm.fullName,
                phone: that.dataForm.phone,
                amount: that.dataForm.amount,
                remark: that.dataForm.remark,
                // areaIds: that.dataForm.areaIds,
                provinceName: that.dataForm.provinceName,
                cityName: that.dataForm.cityName,
                areaName: that.dataForm.areaName,
                provinceId: that.dataForm.provinceId,
                cityId: that.dataForm.cityId,
                areaId: that.dataForm.areaId,
            }
            // 发送请求
            FinanceApi.addInvoice(cond)
                .then(data => {
                    this.$Utils.notifySuccess()
                    this.returnList();
                })
        },
        //  返回
        returnList(){
            this.dataForm = [];
            this.$store.dispatch('delView', this.$route);
            this.$router.push({path: '/finance/InvoiceManagement'});
        }
    }
}
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
